<template>
    <div class="body1 body2" id="body1" v-bind:style="myDiv">
        <div class="home">
            <button class="logout-btn" @click="logout">退出登录</button>
        </div>
        <div class="f1" :style="div2"></div>
        <!-- <div class="f1" style="width:100px;height:100px;background-color: red;"></div> -->
        <div class="image-upload-container">
            <input type="file" multiple @change="handleFileUpload" accept="image/*">
            <button @click="uploadImages">上传图片</button>
        </div>

        <div class="image-gallery">
            <div v-for="(img, index) in imageList" :key="index" class="image-item">
                <img :src="img.url" alt="https://tse2-mm.cn.bing.net/th/id/OIP-C.XDpcCCWS6Lz9h1-nwpIH4AHaJ_?w=115&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" />
                <button @click="removeImage(index)">删除</button>
            </div>
        </div>
        <button @click="changeRB">改蓝黑</button>
        <div class="a1" v-for="item in list" :key="item" :class="{ 'odd-row': isOddRow(index) }">{{item}}</div>
    </div>
    <div class="login-container">
    </div>

</template>

<script>
    import { useRouter } from 'vue-router'

    export default {
        data() {
            return {
                myDiv: {
                    backgroundColor: 'rgb(7, 118, 165)',
                    width: '800px',
                    height: '600px'
                },
                div2: {
                    backgroundColor: 'red',
                    width: '200px',
                    height: '200px'
                },
                imageList: [] 
            }
        },
        methods: {
            changeRB() {
                this.myDiv.backgroundColor = 'rgba(0,138,197,0.3)'
                this.myDiv.width = '500px';
                this.myDiv.height = '300px';
                this.div2.backgroundColor = '#000';
                this.div2.width = '100px';
                this.div2.height = '150px';
                this.div2["border-radius"] = '40px'
            },
            logout() {
                sessionStorage.setItem('showLogin', '1')
                this.$router.push('/LoginApp') // 直接使用$router
                    .catch(error => console.error('跳转失败:', error))
            },
            handleFileUpload(event) {
                const files = event.target.files;
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.imageList.push({
                            url: e.target.result,
                            file: files[i]
                        })
                    }
                    reader.readAsDataURL(files[i]);
                }
            },
            removeImage(index) {
                this.imageList.splice(index, 1);
            }
        },
        name: 'DataBind',

        computed: {
            router() {
                return useRouter()
            }
        },

        mounted() {
             console.log('DataBind组件已加载')

        },

    }
</script>

<style scoped>
    .body1, .body2 {
    display: block;
}
    .logout-btn {
        position: fixed;
        right: 20px;
        bottom: 20px;
        background-color: rgb(7, 118, 165);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 999;
    }
    .image-upload-container, .image-gallery {
         margin: 20px;
        display: block;
}

    .image-item {
        display: inline-block;
        margin: 10px;
}
.a {
  display: flex;
  flex-wrap: wrap;
  width: 200px; 
  height: auto;
  background-color: antiquewhite;
  padding: 20px;
}

.a1 {
  width: 40px !important; 
  height: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
  margin: 10px; 
}

.odd-row {
  background-color: #ff6b6b; 
  width: 40px !important;
  height: 40px !important;
}

.a1:not(.odd-row) {
  background-color: #4ecdc4; 
}
</style>